<template>
  <div>
    <!-- 顶部button -->
    <div>
      <el-button type="success" @click="addBtnTop">新增</el-button>
      <el-button type="warning" @click="udateBtnTop">修改</el-button>
      <el-button type="danger" @click="updAll">批量删除</el-button>
    </div>
    <!-- //表格 -->
    <el-table
      :data="dlist"
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
      border
      style="width: 100%;margin-top:10px"
      max-height="500px"
    >
      <el-table-column fixed type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="title" label="标题" width="300"></el-table-column>
      <el-table-column prop="info" label="简介" width="500"></el-table-column>
      <el-table-column prop="newPrice" label="现价" width="150"></el-table-column>
      <el-table-column prop="oldPrice" label="原价" width="150"></el-table-column>
      <el-table-column prop="cid" label="一级分类" width="100"></el-table-column>
      <el-table-column prop="tid" label="三级分类" width="100"></el-table-column>
      <el-table-column prop="inventory" sortable label="现货" width="100"></el-table-column>
      <el-table-column prop="allNum" sortable label="总量" width="100"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" @click="handleClicks(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="delAll(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 抽屉 -->
    <el-drawer
      size="30%"
      :title="titles"
      style="overflow-y:auto;max-height:100%;"
      :visible.sync="drawer"
      :direction="direction"
      padding-right="10px"
    >
      <div :class="{zzc:disabled?'true':''}"></div>

      <el-form ref="form" :model="form" label-width="80px" style="padding:10px">
        <el-form-item label="标题">
          <el-input v-model="form.title" class="iptw"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="form.info" class="iptw"></el-input>
        </el-form-item>
        <el-form-item label="现价">
          <el-input v-model="form.newPrice" class="iptw"></el-input>
        </el-form-item>
        <el-form-item label="原价" class="iptw">
          <el-input v-model="form.oldPrice"></el-input>
        </el-form-item>
        <el-form-item label="总量" class="iptw">
          <el-input v-model="form.allNum"></el-input>
        </el-form-item>
        <el-form-item label="一级分类" prop="cid">
          <el-select v-model="form.cid" placeholder="请选择类别">
            <el-option
              v-for="(item,index) in calist"
              :key="index"
              :label="item.classify"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类" prop="tid">
          <el-select v-model="form.tid" placeholder="请选择类别">
            <el-option
              v-for="(item,index) in cntitle"
              :key="index"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="disabled" @click="onSubmit">{{titles}}</el-button>
          <el-button @click="del">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      input: "",
      checkboxs: [],
      drawer: false,
      titles: "新增",
      disabled: true,
      form: {
        pattern: 0,
        imgurl:
          "https://img07.miyabaobei.com/d1/p6/2020/06/15/ef/9b/ef9b9eefd778e3a429828dc2d4656df3181415494.jpg",
        specification: ["套餐一", "套餐二", "套餐三"],
        message: [
          { title: "类别", name: "奶嘴" },
          { title: "编码", name: "2603695" },
          { title: "品牌", name: "兔头妈妈甄选" },
          {
            title: "简介",
            name: "兔头妈妈甄选硅胶奶嘴(0-6月) 宽口径防胀气奶瓶硅胶奶瓶",
          },
        ],
        ImageCollection: [
          "https://img05.miyabaobei.com/d1/p6/2020/03/01/cb/4b/cb4bcc803bc3774d214862b796370f76506439783.jpg@base@tag=imgScale&w=800&q=90",
          "https://img08.miyabaobei.com/d1/p6/2020/07/21/45/82/45827a80484618c1f0a9bfa407832a64265179305.jpg@base@tag=imgScale&w=800&q=90",
          "https://img06.miyabaobei.com/d1/p6/2019/01/14/18/dc/18dc7df9ebbb2de4cb83e979a9b6e324449777369.jpg@base@tag=imgScale&w=800&q=90",
        ],
        isRush: "1",
        isGroup: "1",
      },
      direction: "rtl",
    };
  },
  mounted() {
    console.log(this.tlist);
    //商品
    this.getList();
    //类别
    this.getListss();
    //三级
    this.tgetList()
  },
  methods: {
    ...mapActions("details", ["getList", "addListFun", "delLists"]),
    ...mapActions("classify", ["getListss"]),
    ...mapActions("three", ["tgetList"]),
    ...mapMutations("details", ["SET_LIST"]),
    //上面得新增按钮
    addBtnTop() {
      this.drawer = true;
      this.disabled = false;
      this.titles = "新增";
    },
    //查看
    handleClick(row) {
      this.form = row;
      this.drawer = true;
      this.disabled = true;
      this.titles = "查看";
    },
    //编辑
    handleClicks(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.form.cid = this.form.cid * 1;
      this.form.specification = ["套餐一", "套餐二", "套餐三"];
      this.form.message = [
        { title: "类别", name: "奶嘴" },
        { title: "编码", name: "2603695" },
        { title: "品牌", name: "兔头妈妈甄选" },
        {
          title: "简介",
          name: "兔头妈妈甄选硅胶奶嘴(0-6月) 宽口径防胀气奶瓶硅胶奶瓶",
        },
      ];

      console.log(this.form);
      this.disabled = false;
      this.drawer = true;
      this.titles = "修改";

      //
    },
    //确定
    onSubmit() {
      let num = Math.random();
      num > 0.5 ? (this.form.recommend = 1) : (this.form.recommend = 0);

      let form = { ...this.form };
      form.specification = JSON.stringify(form.specification);
      form.message = JSON.stringify(form.message);
      form.ImageCollection = JSON.stringify(form.ImageCollection);
      form.inventory = this.form.allNum;
      this.addListFun(form);
      console.log(form);
      // this.getList();

      if (this.form.id) {
        this.$message({
          message: "恭喜你，修改成功",
          type: "success",
        });
      } else {
        this.$message({
          message: "恭喜你，新增成功",
          type: "success",
        });
      }
      this.form = {
        pattern: 0,
        imgurl:
          "https://img07.miyabaobei.com/d1/p6/2020/06/15/ef/9b/ef9b9eefd778e3a429828dc2d4656df3181415494.jpg",
        specification: ["套餐一", "套餐二", "套餐三"],
        message: [
          { title: "类别", name: "奶嘴" },
          { title: "编码", name: "2603695" },
          { title: "品牌", name: "兔头妈妈甄选" },
          {
            title: "简介",
            name: "兔头妈妈甄选硅胶奶嘴(0-6月) 宽口径防胀气奶瓶硅胶奶瓶",
          },
        ],
        ImageCollection: [
          "https://img05.miyabaobei.com/d1/p6/2020/03/01/cb/4b/cb4bcc803bc3774d214862b796370f76506439783.jpg@base@tag=imgScale&w=800&q=90",
          "https://img08.miyabaobei.com/d1/p6/2020/07/21/45/82/45827a80484618c1f0a9bfa407832a64265179305.jpg@base@tag=imgScale&w=800&q=90",
          "https://img06.miyabaobei.com/d1/p6/2019/01/14/18/dc/18dc7df9ebbb2de4cb83e979a9b6e324449777369.jpg@base@tag=imgScale&w=800&q=90",
        ],
        isRush: "1",
        isGroup: "1",
      };
      this.drawer = false;
    },
    //取消
    del() {
      this.drawer = false;
      this.form = {
        pattern: 0,
        specification: ["套餐一", "套餐二", "套餐三"],
        message: [
          {
            classify: "纸尿裤",
            code: "5092974",
            brand: "兔头妈妈甄选",
            name: "兔头妈妈甄选大师系列自然肤感婴儿纸尿裤S60片",
          },
        ],
        imgurl:
          "https://img07.miyabaobei.com/d1/p6/2020/06/15/ef/9b/ef9b9eefd778e3a429828dc2d4656df3181415494.jpg",
        ImageCollection: [
          "https://img05.miyabaobei.com/d1/p6/2020/03/01/cb/4b/cb4bcc803bc3774d214862b796370f76506439783.jpg@base@tag=imgScale&w=800&q=90",
          "https://img08.miyabaobei.com/d1/p6/2020/07/21/45/82/45827a80484618c1f0a9bfa407832a64265179305.jpg@base@tag=imgScale&w=800&q=90",
          "https://img06.miyabaobei.com/d1/p6/2019/01/14/18/dc/18dc7df9ebbb2de4cb83e979a9b6e324449777369.jpg@base@tag=imgScale&w=800&q=90",
        ],
        isRush: "1",
        isGroup: "1",
      };
    },
    //类型选择
    typeFn(event) {
      console.log(event);
    },
    //顶部修改
    udateBtnTop() {
      if (this.checkboxs.length != 1) {
        this.$message({
          message: "请选择一项进行修改",
        });
      } else {
        this.form = this.checkboxs[0];
        this.disabled = false;
        this.drawer = true;
        this.titles = "修改";
      }
    },
    //删除
    delAll(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.delLists(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量删除
    updAll() {
      let ids = this.checkboxs;
      console.log(ids);
      let arr = [];
      if (ids.length) {
        ids.forEach((v) => {
          arr.push(v.id);
        });
        this.delAll(arr.join(","));
      } else {
        this.$message({
          message: "请选择要删除的项",
        });
      }
    },
    // handleAvatarSuccess(res, file) {
    //   // this.imageUrl = URL.createObjectURL(file.raw);
    //   console.log(res);
    // },
    // beforeAvatarUpload(file) {
    //   const isLt2M = file.size / 1024 / 1024 < 2;
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isLt2M;
    // },
    //排序
    sortChange(val) {
      console.log(val);
    },
    //复选框
    handleSelectionChange(val) {
      this.checkboxs = val;
    },
    //每页多少条
    handleSizeChange(val) {
      console.log(val);
    },
    //当前页
    handleCurrentChange(val) {
      console.log(val);
    },
  },
  computed: {
    ...mapState("details", ["dlist"]),
    ...mapState("three", ["tlist","cntitle"]),
    ...mapState("classify", ["calist"]),
  },
};
</script>

<style scoped>
.iptw {
  width: 300px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
